<template>
    <div class="contents">
        <div class="item" v-for="item in list" :key="item.id"  @click="href(item.id)">
            <img :src="item.img_url" alt="">
            <h4>{{item.title}}</h4>
            <div>
                <div><span class="money">￥{{item.money}}</span><s>￥{{item.price}}</s></div>
                <div class="status"> <span>{{item.status}}</span><span>剩余件数{{item.num}}</span></div>
            </div>
        </div>
       
    </div>
</template>
<script>
import {Toast} from 'mint-ui'
export default {
    data(){
        return {
            list : []
        }
    },
    created(){
        this.getData()
    },
    methods : {
        getData(){
            this.$http.get(this.base_url+'vue/datas/goods/goodL.json','json').then(function(res){
                if(res.body.status == 0){
                    this.list = res.body.data
                }else{
                    Toast('加载失败')
                }
            })
        },
        href(id){
            console.log(id,this)
            this.$router.push({path:'/home/Gshow/'+ id})
        }
    }
}
</script>
<style scoped>
    .money{
        color: red;
    }
    .contents{
        padding: 2%;
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 52px;
        justify-content: space-between;
    }
    .item{
        width: 48.6%;
        margin: 2% 0;
        padding: 1.2%;
        display: flex;
        min-height: 172px;
        border-radius: 4px;
        flex-direction: column;
        border: 1px solid #456;
        box-shadow: 0 0 6px #456;
        justify-content: space-between;
    }
    .item>div{
        padding: 1.2%;
        background: #eee;
    }
    .item>img{
        width: 100%;
    }
    .item>h4{
        font-size: 14px;
    }
    .item s{
        margin-left: 2%;
        font-size: 12px;
    }
    .status{
        display: flex;
        font-size: 12px;
        justify-content: space-between;
    }
</style>


